<template>
  <div >
      <h1>当前个数是：{{$store.state.count}}</h1>
	        <h1>当前个数是：{{$store.state.a.countA}}</h1>
      <h1>{{$store.getters.showNum}}</h1>
      <button  @click="addElement()">commit添加++</button>
       ||| <button  @click="addN()">commit++3</button>
       ||| <button  @click="subN(3)">mapMutation--3</button>
        ||| <button  @click="addAction(3)">action++3</button>
         ||| <button  @click="subNAsync(3)">action--3</button>
         ||| <button  @click="subNums(3)">action--3</button>
		 ||| <button  @click="moduleAs(3)">moduleA--3</button>
  </div>
</template>
<script>

import { mapMutations, mapActions } from 'vuex';

export default ({
	name: 'vuexMutations',
	data: function () {
		return {

		};
	},
	methods: {
		addElement: function () {
			// this.$store.commit() 触发 mutations
			this.$store.commit('add');
		},
		addN: function () {
			this.$store.commit('addN', 3);
		},
		// MapMutations 映射为方法
		...mapMutations(['subN']),
		// 触发 actions 的第一种方式
		addAction: function (num) {
			this.$store.dispatch('addNAsync', num);
		},
		// mapActions 映射为方法
		...mapActions(['subNAsync']),
		...mapActions({
			subNums: 'subNAsync'
		}),
		moduleAs: function (num) {
			this.$store.commit('increment');
		}
	}
});
</script>
